<template>
      <div class="CardCont"> 
            
            <div class="CardCont_title">
                <slot name="title" cards="a"></slot>
            </div>
            <div class="CardCont_body">
                <slot name="body"></slot>
                <div class="loadings"  v-if="isload"> 
                    <div className="login-loader-wrap" >
                        <div className="loader"></div> 
                    </div>
                </div>
            </div> 
      </div>
</template>

<script lang="ts">
import {defineComponent,PropTypes} from 'vue';

export default defineComponent({
       name:'CardCon',
       props:{
        isload:Boolean as PropTypes<Boolean>
       },
       setup(){
            
       }     
})
</script>

<style lang="scss" scoped>
//登录loading加载动画
.login-loader-wrap {
  
    .loader {
        position: absolute;
        top: 40%;
        border-top: 0.3em solid rgba(0, 0, 0, 0.1);
        border-right: 0.3em solid rgba(0, 0, 0, 0.1);
        border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
        border-left: 0.3em solid #22b1ee;
        -moz-transform: translateZ(0);
        -webkit-transform: translateZ(0);
        transform: translateY(40%);
        -moz-animation: loader 600ms infinite linear;
        -webkit-animation: loader 600ms infinite linear;
        animation: loader 600ms infinite linear;
        -moz-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        -webkit-transition: all 600ms ease;
        transition: all 600ms ease;
        z-index: 9999;
    }
    .loader,
    .loader:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
    }
    > span {
        position: absolute;
        top: 60%; 
        font-weight: 400;
        font-size: 13px;
        color: #595959;
    }
}
 
 
 
@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #22b1ee;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #22b1ee;
    }
}
@-moz-keyframes loader {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #22b1ee;
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #22b1ee;
    }
}
@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #22b1ee;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #22b1ee;
    }
}
.CardCont{
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
    
    &>div{
        padding: .5rem;
        box-sizing: border-box;
        &:nth-of-type(2){
               position: relative;
               background: rgb(243, 243, 243); 
                .loadings{
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: rgba(253, 253, 253, 0.64);
                    width: 100%;
                    height: 100%;
                    z-index: 999999;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
        }
    }

    &_title{
         border-bottom: 1px solid rgba(203, 203, 203, 0.687);
         font-size: .8rem;
         display: flex;
         align-items: center;
         padding-left: 1.5rem !important;
         position: relative;
         height: 40px;
         &::before{
             content: '';
             display: inline-block;
             width: 5px;
             height: 20px;
             background: #6366f1;
             box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04); 
             position: absolute;
             left: .5rem;
             top: 50%;
             margin-top: -10px;

         }
    }

}
</style>